<div class="container">
  <div class="container well">
      <div class="row-fluid">
        <div class="span12"> <!-- MENU -->
          <h3>Lista de abonos por cliente</h3>
          <p><a href="<?php echo $this->url(array('controller'=>'historialabono',
                  'action'=>'addnew'));?>" class="btn btn-primary">Agregar abono</a></p>

          <div class="fuelux">
            <table id="MyGrid" class="table table-bordered datagrid table-condensed">
            <thead>
              <tr>
              <th>
              <span class="datagrid-header-title">Abonos</span>
              <div class="datagrid-header-left"></div>
              <div class="datagrid-header-right">
              <div class="input-append search">
              <input type="text" class="input-medium" placeholder="Buscar..."><button class="btn"><i class="icon-search"></i></button>
              </div>
              </div>
              </th>
              </tr>
            </thead>
            <tfoot>
              <tr>
              <th>
              <div class="datagrid-footer-left pull-left" style="display:none;">
              <div class="grid-controls">
              <span><span class="grid-start"></span> - <span class="grid-end"></span> de <span class="grid-count"></span></span>
              <select class="grid-pagesize"><option>10</option><option>20</option><option>50</option><option>100</option></select>
              <span>Por página</span>
              </div>
              </div>
              <div class="datagrid-footer-right pull-right" style="display:none;">
              <div class="grid-pager">
              <button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
              <span>Pág.</span>
              <div class="input-append dropdown combobox">
              <input class="span1" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
              <ul class="dropdown-menu"></ul>
              </div>
              <span>de <span class="grid-pages"></span></span>
              <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
              </div>
              </div>
              </th>
              </tr>
            </tfoot>
            </table>
          </div>
          
        </div>
    </div>
  </div>
</div>
<script type="text/javascript">
          $(function () {
                  $('#BrandLink, #ReturnLink').click(function () {
                          $('body').data('scrollspy').activate('#controls');
                  });

            // INITIALIZING THE DATAGRID
            var dataSource = new StaticDataSource({
                columns: [{
                    property: 'cli_rut',
                    label: 'RUT',
                    sortable: true
                }, {
                    property: 'nombre_completo',
                    label: 'Nombre',
                    sortable: true
                }, {
                    property: 'abo_tipo_movimiento',
                    label: 'Ultimos abonos',
                    sortable: true
                }, {
                    property: 'acciones',
                    label: 'Acciones',
                    sortable: false
                }
              ],
                data: sampleData.datos,
                delay: 250
            });

			$('#MyGrid').datagrid({
                dataSource: dataSource,
                stretchHeight: true
            });
		});
//*******************************************************************************
//*********************************** D A T A ***********************************
(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
		define(factory);
	} else {
		root.sampleData = factory();
	}
}(this, function () {
	return {
                  "datos": <?php echo json_encode( $this->abonosmini ); ?>
	};
}));
</script>